<template>
  <div class="admin-module">
    <div class="button-container">
      <el-button type="primary" @click="addNewCategoryClick">新增类别</el-button>
    </div>

    <el-table
        :data="blogStore.blogCategoryList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        style="width: 50%"
        class="card-item">
      <el-table-column type="index" align="center" width="50" />
      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
      <el-table-column prop="count" label="数量" align="center" min-width="10%" />
      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" @click="editCategoryClick(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteCategoryClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { IBlogCategory } from '@/types/blog.ts'
import { ElMessageBox } from 'element-plus'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'

const blogStore = useBlogStore()

onMounted(async () => {
  await blogStore.queryBlogCategory()
})

/**
 * 点击新增类别按钮
 */
const addNewCategoryClick = () => {
  ElMessageBox.prompt('请输入类别名称', '新增类别', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputPlaceholder: '请输入类别名称',
    inputPattern: /^.{0,10}$/,
    inputErrorMessage: '请输入10字以内的类别名称'
  })
    .then(({ value }) => {
      console.log(value)
    })
}

/**
 * 点击编辑类别按钮
 * @param category 类别
 */
const editCategoryClick = async (category: IBlogCategory) => {
  ElMessageBox.prompt('请输入类别名称', '编辑类别', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputValue: category.name,
    inputPlaceholder: '请输入类别名称',
    inputPattern: /^.{0,10}$/,
    inputErrorMessage: '请输入10字以内的类别名称'
  })
    .then(({ value }) => {
      console.log(value)
    })
}

/**
 * 点击删除类别按钮
 * @param category 类别
 */
const deleteCategoryClick = (category: IBlogCategory) => {

}
</script>
